<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>啊哈编程</title>
    <!-- 引入样式文件 -->
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        window.onload = function () {
            // 在 #app 标签下渲染一个按钮组件
            new Vue({
                el: '#app',
                data: function () {
                    return {
                        id: null,
                        token: null,
                        schoolSelect: @json($school),
                        clubSelect: @json($club),
                        classroomData: [],
                        timeData: [],
                        form: {
                            classroom: '',
                            club: '',
                            name: '',
                            school: 1,
                            phone: '',
                            time: '',
                            school_class_name: ''
                        },
                        btnLoading: false,
                        ruleForm: {
                            classroom: [
                                {required: true, message: '请选择班级', trigger: ['blur', 'change']}
                            ],
                            name: [
                                {required: true, message: '请输入学生姓名', trigger: ['blur', 'change']}
                            ],
                            school_class_name: [
                                {required: true, message: '请选择班级', trigger: ['blur', 'change']}
                            ],
                            club: [
                                {required: true, message: '请选择社团', trigger: ['blur', 'change']}
                            ],
                            school: [
                                {required: true, message: '请输入学校', trigger: ['blur', 'change']}
                            ],
                            phone: [
                                {required: true, message: '请输入家长电话', trigger: ['blur', 'change']}
                            ],
                            time: [
                                {required: true, message: '请选择时间段', trigger: ['blur', 'change']}
                            ],
                        },
                        classes: [
                            '1班',
                            '2班',
                            '3班',
                            '4班',
                            '5班',
                            // '6班',
                            // '7班',
                            // '8班',
                            // '9班',
                            // '10班',
                            // '11班',
                            // '12班',
                            // '13班',
                            // '14班',
                            // '16班',
                            // '17班',
                            // '18班',
                            // '19班',
                            // '20班'
                        ]
                    }
                },
                mounted: function () {
                    this.id = localStorage.getItem('editId')
                    this.token = localStorage.getItem('token')
                    if(this.id && this.token){
                        this.loadStudentApplicationInfo()
                    }
                },
                methods: {
                    submit: function () {
                        var that = this
                        that.btnLoading = true
                        this.$refs.form.validate(function (valid) {
                            if (valid) {
                                const postData = {
                                    school_id: that.form.school,
                                    club_id: that.form.club,
                                    class_id: that.form.classroom,
                                    time_id: that.form.time,
                                    school_class_name: that.form.school_class_name,
                                    name: that.form.name,
                                    phone: that.form.phone,
                                    form_id: {{$form_id}}
                                }
                                if(that.id){
                                    postData.id = that.id
                                    postData.token = that.token
                                    $.post('/api/post_update_student_application', postData, function (res) {
                                        if(res.status === 1){
                                            that.$message.success('报名成功！\n' +
                                                '请及时到班委处缴费。')
                                            localStorage.setItem('editId',res.data.id)
                                            localStorage.setItem('token',res.data.token)
                                            that.btnLoading = false
                                        }else{
                                            that.$message.error(res.msg)
                                            that.btnLoading = false
                                        }
                                    }).error(function (e) {
                                        if(e.status === 422){
                                            const errorObj = Object.keys(e.responseJSON.errors)[0]
                                            that.$message.error(e.responseJSON.errors[errorObj][0])
                                        }
                                        that.btnLoading = false
                                    })

                                }else{
                                    $.post('/api/post_student_application', postData, function (res) {
                                        if(res.status === 1){
                                            that.$message.success('报名成功！\n' +
                                                '请及时到班委处缴费。')
                                            localStorage.setItem('editId',res.data.id)
                                            localStorage.setItem('token',res.data.token)
                                            that.id = res.data.id
                                            that.token = res.data.token
                                            that.btnLoading = false
                                        }else{
                                            that.$message.error(res.msg)
                                            that.btnLoading = false
                                        }
                                    }).error(function (e) {
                                        if(e.status === 422){
                                            const errorObj = Object.keys(e.responseJSON.errors)[0]
                                            that.$message.error(e.responseJSON.errors[errorObj][0])
                                        }
                                        that.btnLoading = false
                                    })
                                }
                            }
                        })
                    },
                    classroomSelect: function () {
                        const that = this
                        if(!that.form.club || !that.form.school){
                            return false
                        }
                        that.form.time = null
                        that.form.classroom = null
                        that.form.school_class_name = null
                        that.classroomData = []
                        that.timeData = []
                        // that.form.grade = null
                        $.get('/api/get_load_classroom_select', {club_id:that.form.club,school_id:that.form.school}, function (res) {
                            that.classroomData = res.data
                        })
                    },
                    timeSelect: function () {
                        const that = this
                        if(!that.form.classroom){
                            return false
                        }
                        $.get('/api/get_load_time_select', {class_id:that.form.classroom}, function (res) {
                            that.timeData = res.data
                        })
                    },
                    loadStudentApplicationInfo: function () {
                        const that = this
                            $.get('/api/get_student_application_info', {id:that.id,token:that.token}, function (res) {
                                that.form = {
                                    classroom: res.data.class_and_grade_id,
                                    school_class_name: res.data.school_class_name,
                                    club: res.data.club_id,
                                    name: res.data.name,
                                    school: res.data.school_id,
                                    phone: res.data.phone,
                                    time: null
                                }
                                that.classroomSelect()
                                that.form.time = res.data.time_id
                                that.timeSelect()
                        })
                    },
                    clearStorage() {
                        localStorage.clear()
                    }
                }
                // template: `<van-button>按钮</van-button>`,
            })

            // 调用函数组件，弹出一个 Toast
            // vant.Toast('提示');
            // 通过 CDN 引入时不会自动注册 Lazyload 组件
            // 可以通过下面的方式手动注册
        }
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .fc {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .aha {
            position: relative;
            background-color: #076aba;
            min-height: 130vh;
            width: 100vw;
        }

        .logo {
            position: absolute;
            width: 100px;
            left: 2vw;
            top: 2vw;
            z-index: 50;
        }

        .header {
            width: 100%;
        }

        .recruit-students {
            position: absolute;
            left: 2vw;
            top: 40vw;
            width: 150px;
            height: 40px;
            color: #076aba;
            font-size: 17px;
            font-weight: bold;
            text-align: center;
            line-height: 40px;
            letter-spacing: 2px;
            background-color: #FFF;
            box-shadow: 0px 2px rgba(0, 0, 0, 0.1);
            border-radius: 100px;
            z-index: 60;
        }

        .robot {
            position: absolute;
            width: 80px;
            bottom: 2vh;
            right: 0;
            z-index: 40;
        }

        .form {
            position: absolute;
            left: 50%;
            top: 70vw;
            z-index: 30;
            transform: translateX(-50%);
            width: 90%;
            height: 500px;
            background-color: #FFF;
            border-radius: 16px 16px;
            display: grid;
            grid-template-rows: repeat(6, 1fr);
            padding: 20px;
        }
        .el-link {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 10px;
            z-index: 900;
        }
        #app {
            position: relative;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="aha">
        <img src="https://aha-edu.oss-cn-huhehaote.aliyuncs.com/aha_poster/LOGO.png" class="logo"/>
        <img src="https://aha-edu.oss-cn-huhehaote.aliyuncs.com/aha_poster/999AC160-F354-4cc6-99CA-8CD5C1B2C474.png"
             alt="" class="header"/>
        <div class="recruit-students">社团招新!</div>
        <el-form ref="form" class="form" :model="form" :rules="ruleForm" label-width="79px">
            <el-form-item label="社团" prop="club">
                <el-select v-model="form.club" placeholder="请选择社团" @change="classroomSelect">
                    <el-option v-for="(item,key) in clubSelect" :key="key" :label="item.club_name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="学校" prop="school">
                <el-select v-model="form.school" placeholder="请选择学校" @change="classroomSelect">
                    <el-option v-for="(item,key) in schoolSelect" :key="key" :label="item.school_name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="年级" prop="classroom">
                <el-select v-model="form.classroom" placeholder="请选择班级" @change="timeSelect">
                    <el-option v-for="(item) in classroomData" :key="item.id" :label="item.grade + item.class_name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="班级" prop="school_class_name">
                <el-select v-model="form.school_class_name" placeholder="请选择班级" @change="timeSelect">
                    <el-option v-for="(item) in classes" :key="item.id" :label="item" :value="item"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="时间段" prop="time">
                <el-select v-model="form.time" placeholder="请选择时间段" >
                    <el-option v-for="(item) in timeData" :key="item.id" :label="item.week_text + ':' + item.start_time + '-' + item.end_time" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="学生姓名" prop="name">
                <el-input style="width:221px" v-model="form.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="家长电话" prop="phone">
                <el-input type="number" style="width: 221px" v-model="form.phone" placeholder="请选择电话"></el-input>
            </el-form-item>
            <el-form-item>
                <div class="fc">
                    <el-button type="primary" :disabled="btnLoading" @click="submit">提交</el-button>
                </div>
            </el-form-item>
        </el-form>
        <img src="https://aha-edu.oss-cn-huhehaote.aliyuncs.com/aha_poster/robot.png" class="robot"/>
    </div>
    <el-link type="info" @click="clearStorage">清除缓存</el-link>
</div>
</body>
</html>
